<template>
  <div class="dashboard">
    <my-carousel class="pcOnly" :showNumber="showNumber" gap="15px" :list="listPerson">
      <template v-slot="{item, index}">
        <el-card shadow="hover" class="my-carousel-item">
          <img :src="item.img"/>
          <div class="carousel-info">
            <span>{{ item.title }}</span>
            <span>{{ item.content }}</span>
          </div>
        </el-card>
      </template>
    </my-carousel>
    <div style="width: 100%; height: 50px"/>
    <my-carousel class="pcOnly" :showNumber="showNumber" gap="15px" :list="listCompany">
      <template v-slot="{item, index}">
        <el-card shadow="hover" class="my-carousel-item">
          <img :src="item.img"/>
          <div class="carousel-info">
            <span>{{ item.title }}</span>
            <span>{{ item.content }}</span>
          </div>
        </el-card>
      </template>
    </my-carousel>
    <my-quick-nav class="pcOnly" style="padding: 30px"/>
  </div>
</template>

<script setup>
import {getSvgPath, handleName} from "@/utils/index.js";
import {useCompanyListRef} from "@/composition/billSys/useAccount.js";
import {getPersonDataRef} from "@/composition/billSys/usePersonBill.js";
import {getCompanyDataRef} from "@/composition/billSys/useCompanyBill.js";
import MyQuickNav from "@/components/myQuickNav.vue";
import MyCarousel from "@/components/myCarousel.vue";

const listPerson = ref([
  {title: '个人 / 昨日记账', content: '0笔', img: getSvgPath('CloudUpload')},
  {title: '个人 / 本月记账', content: '0笔', img: getSvgPath('Timesheet')},
  {title: '个人 / 月度支出', content: '0元', img: getSvgPath('MoneyOut')},
  {title: '个人 / 月度收入', content: '0元', img: getSvgPath('MoneyIn')}
]);

const companyList = useCompanyListRef();

const listCompanyTemp = [
  {title: '月度支出', content: '0元', img: getSvgPath('Outdoor')},
  {title: '月度收入', content: '0元', img: getSvgPath('Indoor')}
];

const listCompany = ref([]);

watchEffect(() => {
  let temp = [];
  const companyData = getCompanyDataRef();
  companyList.value.forEach(myCompany => {
    listCompanyTemp.forEach((item, idx ) => {
      let content = '0元';
      if(companyData.value[myCompany.companyId]) {
        content = idx === 0 ? companyData.value[myCompany.companyId].monthOut: companyData.value[myCompany.companyId].monthIn;
      }
      temp.push({
        title: handleName(myCompany.name) + ' / ' + item.title,
        content,
        img: item.img
      });
    });
  });
  listCompany.value = temp;
});

watchEffect(() => {
  const personData = getPersonDataRef();
  listPerson.value[0].content = (personData.value.yesterdayCount || 0) + '笔';
  listPerson.value[1].content = (personData.value.monthCount || 0) + '笔';
  listPerson.value[2].content = (personData.value.monthOut || 0) + '元';
  listPerson.value[3].content = (personData.value.monthIn || 0) + '元';
});

const showNumber = ref(4);


</script>

<style scoped lang="scss">
.dashboard {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
  width: 100%;
  height: calc(100% - 50px - 33px);
  background-color: $bg-color-gray;
  overflow: hidden;

  .my-carousel-item {
    width: 100%;
    height: 160px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: $dashboard-padding;
    //background-color: $leftNav-bg-active-color;
    cursor: pointer;
    border-radius: $dashboard-padding;

    :deep(.el-card__body) {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: row;
      justify-content: space-between;

      img {
        height: 100%;
      }
    }

  }

  .carousel-info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: min(1.3vw, 25px);
    font-weight: bold;
    align-items: flex-end;
  }
}
</style>
